<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" th:href="@{http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css}">
    <link rel="stylesheet" th:href="@{css/friends.css}">
    <script th:src="@{js/jquery.js}"></script>
    <script th:src="@{js/jquery.mobile-1.4.5.min.js}"></script>
    <script th:src="@{js/friends.js}"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed">
          <img src="images/logo.png" alt="" class="logo">
          <h1>联系人</h1>
        </div>
      
        <div data-role="main" class="ui-content">
          <form class="ui-filterable">
            <input id="myFilter" data-type="search" placeholder="搜索联系人">
          </form>
          <ul data-role="listview" data-input="#myFilter" data-filter="true" class="friends">
            <li>
              <div class="perBox">
                <button class="personBtn ui-btn ui-icon-user ui-btn-icon-left">
                  <span>张三</span>
                  <span>男</span>
                  <span>13181711111</span>
                </button>
              </div>
              <div class="rigBtnBox">
                <button class="chatBtn ui-btn ui-icon-comment ui-btn-icon-left">聊天</button>
                <button class="deleteBtn ui-btn ui-icon-delete ui-btn-icon-left">删除</button>
              </div>
            </li>
            <li>
              <div class="perBox">
                <button class="personBtn ui-btn ui-icon-user ui-btn-icon-left">
                  <span>李四</span>
                  <span>女</span>
                  <span>13449011321</span>
                </button>
              </div>
              <div class="rigBtnBox">
                <button class="chatBtn ui-btn ui-icon-comment ui-btn-icon-left">聊天</button>
                <button class="deleteBtn ui-btn ui-icon-delete ui-btn-icon-left">删除</button>
              </div>
            </li>
            <li>
              <div class="perBox">
                <button class="personBtn ui-btn ui-icon-user ui-btn-icon-left">
                  <span>王五</span>
                  <span>男</span>
                  <span>00583211111</span>
                </button>
              </div>
              <div class="rigBtnBox">
                <button class="chatBtn ui-btn ui-icon-comment ui-btn-icon-left">聊天</button>
                <button class="deleteBtn ui-btn ui-icon-delete ui-btn-icon-left">删除</button>
              </div>
            </li>
          </ul>
          <!-- 添加联系人 -->
          <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="turn" class="ui-btn ui-corner-all ui-shadow">添加联系人</a>
          <div data-role="popup" id="myPopupDialog">
            <div data-role="header">
              <img src="images/logo.png" alt="" class="logo">
              <h1>添加联系人</h1>
            </div>
            <div data-role="main" class="ui-content">
              <input type="text" placeholder="输入联系人姓名" id="friName" required>
              <label for="male">男性</label>
              <input type="radio" name="gender" id="male" value="male">
              <label for="female">女性</label>
              <input type="radio" name="gender" id="female" value="female"> 
              <input type="text" placeholder="手机号" id="friPho" required>
              <a href="#" class="back ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回</a>
              <a href="#" class="save ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-check ui-btn-icon-left" data-rel="back">保存</a>
            </div>
          </div>
        
        </div>
      
        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                  <li><a href="chat.html" data-icon="comment" data-ajax=false>聊天</a></li>
                  <li><a href="#" data-icon="user" class="autoCli" data-ajax=false>联系人</a></li>
                  <li><a href="account/register.html" data-icon="edit" data-ajax=false>注册</a></li>
                  <li><a href="account/info.html" data-icon="info" data-ajax=false>个人信息</a></li>
                </ul>
              </div>
        </div>
    </div> 
</body>
</html>